<template>
  <a-dropdown v-model:open="visible">
    <iconfont
      name="#icon-gengduo-shuxiang"
      style="
        color: #1677ff;
        font-size: 16px;
        margin-left: 5px;
        outline: 0;
        cursor: pointer;
      "
      @click.stop
    />
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item
          key="download"
          :disabled="loadingDownload || loadingDelete"
        >
          <a-spin :spinning="loadingDownload"> 下载 </a-spin>
        </a-menu-item>
        <a-menu-item key="delete" :disabled="loadingDownload || loadingDelete">
          <a-spin :spinning="loadingDelete"> 删除</a-spin>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup>
import { ref } from 'vue'
import iconfont from '@/components/iconfont.vue'
import mockApi from '@/api/simple-mock.js'
import { removePrj, downloadPrj } from '@/api/db.js'
import { message as Message } from 'ant-design-vue'
import { downloadFormBlob } from '@/utils/util.js'
/**
 * 外部参数
 */
let props = defineProps({
  data: { type: Object, required: true },
})
/**
 * 通信事件
 */
let emit = defineEmits(['download', 'delete'])

/**
 * 操作
 */
let visible = ref(false)
async function handleMenuClick(e) {
  if (e.key === 'download') {
    await onDownload()
  }
  if (e.key === 'delete') {
    await onDelete()
  }
}

/**
 * 下载
 */
let loadingDownload = ref(false)

async function onDownload() {
  loadingDownload.value = true
  try {
    await downloadPrj({ id: props.data.id }).then(downloadFormBlob)
    Message.success('下载成功!')
    emit('download')
  } catch (e) {
    Message.error('下载失败!')
  }
  loadingDownload.value = false
}

/**
 * 删除
 */
let loadingDelete = ref(false)
async function onDelete() {
  loadingDelete.value = true
  try {
    await removePrj({ prjId: props.data.id })
    Message.success('删除成功!')
    emit('delete')
  } catch (e) {
    Message.error('删除失败!')
  }
  loadingDelete.value = false
}
</script>
